<template>
    <!-- 题目展示的窗口 -->
    <div class="app-container">
        <!-- 选择题 -->
        <el-row v-if="questionItem.questionType == 1 || questionItem.questionType == 2">
            <el-col :span="24">
            <div>
                {{ itemOrder }}、({{ getType(questionItem.questionType)}})
                <p class="question-item" v-html="questionItem.questionName"></p>
                <el-input-number class="score-input" v-if="!isView" v-model="questionItem.questionScore" :min="1" :max="100" @change="changeScore"></el-input-number>
                <span v-if="isView">
                    ({{ formatterScore(questionItem.questionScore) }}) 分
                </span>
            </div>
        </el-col>
            <el-col :span="24">A：<p class="answer-item" v-html="questionItem.answerA"></p></el-col>
            <el-col :span="24">B：<p class="answer-item" v-html="questionItem.answerA"></p></el-col>
            <el-col :span="24">C：<p class="answer-item" v-html="questionItem.answerA"></p></el-col>
            <el-col :span="24">D：<p class="answer-item" v-html="questionItem.answerA"></p></el-col>
        </el-row>
        <!-- 判断题 -->
        <el-row v-if="questionItem.questionType == 3">
            <el-col :span="24">
                <div>
                    {{ itemOrder }}、({{ getType(questionItem.questionType)}})
                    <p class="question-item" v-html="questionItem.questionName"></p>
                    <el-input-number class="score-input" v-if="!isView" v-model="questionItem.questionScore" :min="1" :max="100" @change="changeScore"></el-input-number>
                    <span v-if="isView">
                        ({{ formatterScore(questionItem.questionScore) }}) 分
                    </span>
                </div>
            </el-col>
            <el-col :span="6"><p style="margin-left:15px"> 正确</p></el-col>
            <el-col :span="8"><p> 错误</p></el-col>
        </el-row>
        <!-- 简答题 -->
        <el-row v-if="questionItem.questionType == 4">
            <el-col :span="24">
                <div>
                    <span class="order-item">{{ itemOrder }}、({{ getType(questionItem.questionType)}})</span>
                    <p class="question-item" v-html="questionItem.questionName"></p>
                    <el-input-number class="score-input" v-if="!isView" v-model="questionItem.questionScore" :min="1" :max="100" @change="changeScore"></el-input-number>
                    <span v-if="isView">
                        ({{ formatterScore(questionItem.questionScore) }}) 分
                    </span>
                </div>
            </el-col>
            <el-col :span="24">
                <el-input
                    type="textarea"
                    disabled
                    resize="none"
                    :rows="2"
                    placeholder="请输入内容">
                </el-input>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'QuestionItem',
    props:{
        questionItem:{
            type: Object
        },
        getExamScore:{
            type: Function,
            default: null
        },
        isView:{
            type: Boolean
        },
        itemOrder:{
            type:Number
        }
    },
    data(){
        return{
            questionEnum:[
                {key:1,value:"单选题"},
                {key:2,value:"多选题"},
                {key:3,value:"判断题"},
                {key:4,value:"简答题"}
            ],
        }
    },
    mounted(){
    },
    methods:{
        getType(val){
            let name = "";
            this.questionEnum.forEach(el=>{
                if(el.key == val){
                    name = el.value;
                    return;
                }
            })
            return name;
        },
        formatterScore(val){
            let str = val.toString();
            let index =str.indexOf('.');
            if(index == -1){
                return val+".00";
            }else{
                return val+'0';
            }
        },
        changeScore(){
            this.getExamScore();
        }   
    }
}
</script>

<style scoped>
    *{
        margin: 0px;
        padding: 0px;
    }

    .question-item{
        display: inline-block;
    }

    .score-input{
        margin-left: 15px;
    }

    .answer-item{
        display: inline-block;
    }
    .order-item{

    }



</style>